<template>
        <!--你的位置-->
        <div class="top-info clearfix" id="_j_crumb">
            <div class="crumb">
                <span class="tit">您在这里：</span>
                <div class="item">
                    <div class="drop">
                        <span class="hd"><a href="#" target="_blank">酒店<i></i></a></span>
                        <div class="bd" style="width:auto">
                            <i class="arrow"><b></b></i>
                            <div class="col text-left">
                                <h3>周边国家和地区</h3>
                                <ul class="clearfix">
                                    <li>
                                        <a href="#" target="_blank" title="朝鲜酒店预订">朝鲜<span>North Korea</span></a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="韩国酒店预订">韩国<span>Korea</span></a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="蒙古酒店预订">蒙古<span>Mongolia</span></a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="日本酒店预订">日本<span>Japan</span></a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="俄罗斯酒店预订">俄罗斯<span>Russia</span></a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="老挝酒店预订">老挝<span>Laos</span></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="more">
                                <a href="#" target="_blank">&gt;&gt;更多国家和地区</a>
                            </div>
                        </div>
                    </div>
                    <em>&gt;</em>
                </div>

                <div class="item">
                    <div class="drop">
                        <span class="hd"><a href="#" target="_blank" title="中国酒店预订">中国<i></i></a></span>
                        <div class="bd" style="width:auto">
                            <i class="arrow"><b></b></i>
                            <div class="col text-left">
                                <h3>中国其他城市</h3>
                                <ul class="clearfix">
                                    <li>
                                        <a href="#" target="_blank" title="北京閰掑簵鎺ㄨ崘">北京<span>Beijing</span></a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="上海閰掑簵鎺ㄨ崘">上海<span>Shanghai</span></a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="西安閰掑簵鎺ㄨ崘">西安<span>Xi'an</span></a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="深圳閰掑簵鎺ㄨ崘">深圳<span>Shenzhen</span></a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="广州閰掑簵鎺ㄨ崘">广州<span>guangzhou</span></a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" title="重庆閰掑簵鎺ㄨ崘">重庆<span>ChongQing</span></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="more">
                                <a href="#" target="_blank">&gt;&gt;更多城市</a>
                            </div>
                        </div>
                    </div>
                    <em>&gt;</em>
                </div>
                <div class="item">
                    <a href="#" target="_blank" :title="HotelPathnav.Chengdu">{{HotelPathnav.nainiang}}</a>
                    <em>&gt;</em>
                </div>

                <!--酒店名-->
                <div class="item cur">
                    <strong :title="HotelPathnav.reserve">
                        {{HotelPathnav.reserve}}
                    </strong>
                </div>
            </div>

            <!--天气预报-->
            <div class="littleWeather">
                <ul>
                    <li v-for="item in weatherList" :key="item.id">
                        <img src="http://images.mafengwo.net/images/mdd_weather/icon/icon8.png" width="25" height="25"/>
                        &nbsp;&nbsp;
                        <span>{{item.type}}&nbsp;{{item.low}}</span>~
                        <span>{{item.high}}</span>
                    </li>
                </ul>
            </div>

        </div>
</template>

<script>
    export default {
        name: "PathNavigation",
        props: ["HotelPathnav"],
        data(){
            return{
                city:'',
                weatherList:[],
            }
        },
        methods:{
            searchWeather(){
                var that = this;
                this.$axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
                .then(function (response) {
                    that.weatherList = response.data.data.forecast.splice(0,1);
                    // eslint-disable-next-line no-unused-vars
                }).catch(function (err) {

                })
            },
            changeCity(city){
                this.city = city;
                this.searchWeather();
            }
        },
        //自动加载
        created() {
            this.changeCity('成都');
        }
    }
</script>

<style scoped>
    .littleWeather{
        float: none;
        padding: 0;
        width: auto;
        font-size: 12px;
        color: #999;
        line-height: 25px;
        text-align: right;
    }
    .littleWeather a{
        text-decoration: none;
        color: #999;
        line-height: 25px;
    }

    .text-left{
        text-align: left;
    }
</style>